const TODO = `todolist33997`; //本地储存的键名
//自定义指令：自动全选
Vue.directive('select', {
    inserted: function(el) {
        if (el) el.select();
    }
})
const vm = new Vue({
    el: `#app`,
    // -------------------------数据块------------------------------
    data: {
        //cur数据绑定的是事项输入框
        cur: ``,
        // currentList绑定的是tab栏的状态  0表示未完成栏|1表示已完成栏|2表示全部事项栏
        currentList: 2,
        // modiState绑定的是处于修改状态的事项的id，-1表示无事项处于修改状态
        modiState: -1,
        // lastRemove维护一个删除事项列表
        lastRemove: [],
        // items绑定事项数据，从本地储存中获取
        items: JSON.parse(localStorage.getItem(TODO)) || [],
    },
    // -------------------------数据块------------------------------
    // -------------------------方法块------------------------------
    methods: {
        // 模拟checkbox的点击功能
        selectAll(check) {
            this.allChoose = !check;
        },
        // 添加事项的方法
        addItem(e) {
            // 当ctrl按下时不触发该事件
            if (e.ctrlKey) return;
            if (!(this.cur.trim())) return;
            this.items.unshift({
                id: this.items.length ? this.items[0].id + 1 : 1,
                content: this.cur,
                done: false,
                isDel: false
            });
            this.cur = ``;
        },
        // 切换事项完成状态
        toggleItem(id) {
            const index = this.items.findIndex(ele => ele.id === id);
            this.items[index].done = !this.items[index].done;
        },
        // 移除事项
        removeItem(id) {
            if (!confirm(`确定要删除该事项吗？\r\n------\（光标在输入栏时按住ctrl+enter可以找回删除项\)`)) return;
            const index = this.items.findIndex(ele => ele.id === id);
            this.lastRemove.push(index);
            this.items[index].isDel = true;
        },
        // 撤回对事项的删除
        recallItem() {
            if (this.lastRemove.length) {
                this.items[this.lastRemove.pop()].isDel = false;
            }
        },
        // tab栏切换
        changeList(state) {
            this.currentList = state;
        },
        // 将对应id的事项切换至修改状态
        setText(id, state) {
            this.modiState = state ? id : -1;
        }
    },
    // -------------------------方法块------------------------------
    // -------------------------侦听器块---------------------------
    watch: {
        // 侦听items的变化，发生变化则将更新入本地储存
        items: {
            deep: true,
            handler(newVal) {
                localStorage.setItem(TODO, JSON.stringify(newVal));
            }
        }
    },
    // -------------------------侦听器块---------------------------
    // -------------------------计算属性块------------------------
    computed: {
        allChoose: {
            // 全选框点击时，点击事件会给allChoose进行赋值操作，触发set方法
            set(check) {
                this.items.forEach(ele => ele.isDel ? 0 : ele.done = check);
            },
            // 计算属性与items数据绑定，发生变化时触发get方法
            get() {
                return this.items.some(ele => !ele.isDel) && this.items.every(ele => ele.isDel || ele.done);
            }
        },
        // 判断未被删除的事项的数量的计算属性
        itemExist() {
            return this.items.reduce((total, cur) => cur.isDel || cur.done ? total : total += 1, 0);
        }
    }
    // -------------------------计算属性块------------------------
})